<template>
  <van-icon
    name="back-top"
    @click="scrollToTopFn"
    class="scrollToTopIcon"
    ref="topicon"
  />
</template>

<script>
export default {
  props: ['refname', 'offsetLeft'],
  mounted () {
    console.log(this.offsetLeft)
    // 加载组件元素后，对元素定位重新设置
    if (this.offsetLeft > 0) {
      this.$refs.topicon.style.left =
        this.offsetLeft - 10 - this.$refs.topicon.offsetWidth + 'px'
      this.$refs.topicon.style.bottom = '0px'
      //   this.$refs.topicon.style.backgroundColor = 'tomato'
    } else {
      this.$refs.topicon.style.bottom = '120px'
    }
  },
  methods: {
    scrollToTopFn () {
      //   console.log(this.offsetLeft)
      // 设置点击事件： 让父组件元素进行滚动到顶部
      this.$parent.$refs[this.refname].scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.scrollToTopIcon {
  position: fixed;
  z-index: 9999;
  right: 10px;
  color: #fff;
  font-weight: 700;
  background-color: tomato !important;
}
</style>
